<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Vue.js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div  id="app1">

            <button @click="clickButton1">{{message}}</button>

            <li v-for="item in items">{{item.text}}</li>

        <p id="counterId" style = "font-size:25px;">计数器: {{ counter }}</p>
        <a @click = "counterAdd" href="#" style = "font-size:25px;">点我</a>

    </div>


    <br>

    <div id="app2">
        {{message}} ~~~
    </div>

    <script>
        var vue1=new Vue({
            el: '#app1',
            data() {
                var items = [];
                for (var i=0; i<30; i++){
                    var dc = {};
                    dc['text'] = i;
                    items.push(dc);
                }

                return {
                    message: "This is Vue1",
                    items: items,
                    counter: 0,
                }
            },
            methods: {
                clickButton1() {
                    console.log('clickButton1~~~')
                },
                counterAdd() {
                    this.counter ++;
                    var elem = document.getElementById('counterId');
                    console.log(elem);
                    if (this.counter % 2 == 1)
                        elem.textContent = 'aaaa';
                    else
                        elem.textContent = 'bbbb';
                }
            }
        });

        var vue2 = new Vue({
            el: '#app2',
            data() {
                return {
                    message: "This is Vue2"
                }
            }
        });

    </script>

</body>
</html>

